<template>
    <div>
        <el-page-header content="编辑新闻" title="新闻管理" @back="handleBack" />
        <el-form ref="newsFormRef" :model="newsForm" :rules="newsFormRules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="标题" prop="title">
                <el-input v-model="newsForm.title" />
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <editor @event="handleChange" :content="newsForm.content" v-if="newsForm.content" />
            </el-form-item>
            <el-form-item label="类型" prop="category">
                <el-select v-model="newsForm.category" class="m-2" placeholder="Select" style="width: 100%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="内容" prop="cover">
                <Upload :avatar="newsForm.cover" @kerwinChange="handleChangeImg" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" size="large">更新新闻</el-button>
            </el-form-item>
        </el-form>
    </div>
</template> 


<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import editor from '@/components/editor/Editor'
import upload from '@/util/upload'
import Upload from '@/components/upload/Upload'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()

const newsFormRef = ref()
const newsForm = reactive({
    title: '',
    content: '',
    category: 1,   //1 最新动态
    cover: '',
    file: null,
    isPublish: 0    //0未发布 1已发布
})
const newsFormRules = reactive({
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入内容', trigger: 'blur' },
    ],
    category: [
        { required: true, message: '请选择分类', trigger: 'blur' },
    ],
    cover: [
        { required: true, message: '请上传图片', trigger: 'blur' },
    ],
})

// editor内容改变的回调
const handleChange = (data) => {
    console.log(data)
    newsForm.content = data
}

const options = [{
    label: '最新动态',
    value: 1
}, {
    label: '典型案例',
    value: 2
}, {
    label: '通知公告',
    value: 3
}]

// // 每次选择完图片后的回调
const handleChangeImg = (file) => {
    newsForm.cover = URL.createObjectURL(file)
    newsForm.file = file
}

const submitForm = () => {
    newsFormRef.value.validate(async valid => {
        if (valid) {
            console.log(newsForm)
            // 后台通道
            let res = await upload('/adminapi/news/list', newsForm)
            console.log(res)
            if (res.data.ActionType == 'ok') {
                ElMessage.success('更新成功')
                router.back()
            }
        }
    })
}

const handleBack = () => {
    router.back()
}


onMounted(async () => {
    console.log(route.params.id)
    const res = await axios.get(`/adminapi/news/list/${route.params.id}`)
    console.log(res.data.data[0])
    Object.assign(newsForm, res.data.data[0])
})

</script>

<style lang="scss" scoped>
.el-form {
    margin-top: 50px;
}
</style>